<template>
    <div id="shop">
        <van-nav-bar
            title="异次元烧烤"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            style="background-color:#A6999E;"
        />
        <!-- 店铺信息 -->
    
        <van-row  style="background-color:#A6999E">
            <van-col span="8">
                <div class="dian_left" style="margin:10px 0px 10px 10px">
                    <img src="../dist/images/dianpu02.jpg" alt="" width="100%" >
                </div>
            </van-col>
            <van-col span="16">
                <div class="dian_right">
                    <p style="font-size:14px;color:#fff;padding-left:10px">商家配送 / 35分钟送达</p>
                    <p style="font-size:14px;color:#fff;padding-left:10px">配送费3￥</p>
                    <van-notice-bar text="满40减5，满70减8，满100减10" left-icon="volume-o" background="#A6999E"/>
                </div>

            </van-col>
            
        </van-row>

        <van-tabs type="line" title-active-color="red" scrollspy="true">
            <!-- 点菜 -->
            <van-tab title="点菜">
                <van-row gutter="0">
                    <van-col span="6">
                        <van-sidebar v-model="activeKey">
                            <van-sidebar-item title="商家推荐" dot ></van-sidebar-item>
                            <van-sidebar-item title="热销美食" info="5" />
                            <van-sidebar-item title="精美套餐" info="9+" />
                            <van-sidebar-item title="肉类" />
                            <van-sidebar-item title="素类" />
                            <van-sidebar-item title="主食" />
                            <van-sidebar-item title="饮品" />
                            <van-sidebar-item title="其他" />
                        </van-sidebar>
                    </van-col>
                    <van-col span="17">
                        <van-checkbox-group class="card-goods" v-model="checkedGoods">
                        <van-checkbox
                           
                            v-for="item in goods"
                            :key="item.id"
                            :name="item.id"
                        >
                            <van-card
                            :title="item.title"
                            :desc="item.desc"
                            :num="item.num"
                            :price="formatPrice(item.price)"
                            :thumb="item.thumb"
                            />
                        </van-checkbox>
                        </van-checkbox-group>

                    </van-col>
                
                </van-row>
                


            </van-tab>
            <!-- 评价 -->
            <van-tab title="评价(4.5)">内容 2</van-tab>
            <!-- 商家 -->
            <van-tab title="商家">内容 3</van-tab>
        </van-tabs>




        <!-- 底部提交区 -->
        <van-submit-bar
            :price="totalPrice"
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="onSubmit"
            
           
        >
        </van-submit-bar>
    </div>


</template>



<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';

export default {
  components: {
    [Card.name]: Card,
    [Checkbox.name]: Checkbox,
    [SubmitBar.name]: SubmitBar,
    [CheckboxGroup.name]: CheckboxGroup
  },

  data() {
    return {
        activeKey: 0,
        checkedGoods: ['1', '2', '3'],
        goods: [
            {
                id: '1',
                title: '进口香蕉',
                desc: '约250g，2根',
                price: 200,
                num: 5,
                thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
            }, {
                id: '2',
                title: '陕西蜜梨',
                desc: '约600g',
                price: 690,
                num: 3,
                thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
            }, {
                id: '3',
                title: '美国伽力果',
                desc: '约680g/3个',
                price: 2680,
                num: 4,
                thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
            },
            {
                id: '3',
                title: '美国伽力果',
                desc: '约680g/3个',
                price: 2680,
                num: 4,
                thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
            },
            {
                id: '3',
                title: '美国伽力果',
                desc: '约680g/3个',
                price: 2680,
                num: 4,
                thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
            },
        ]
    };
  },

  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      return '结算' + (count ? `(${count})` : '');
    },

    totalPrice() {
      return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price*item.num : 0), 0);
    }
  },

  methods: {
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },

    onSubmit() {
      Toast('点击结算');
    },

    onClickLeft() {
            this.$router.push('/')
        },
  }
};
</script>




<style lang="stylus">

</style>